<template>
  <div>
    <div class="title">
      <slot name="title">title</slot>
    </div>
    <div class="main">
      <ul>
        <li
          @click="num = item.num"
          @dblclick="gotoTempPage_fn(item.num)"
          class="main-box"
          v-for="item in $store.state.groups"
          :key="item.id"
        >
          <div class="main-left">
            <Avatar
              :width="35"
              :height="35"
              :src="item.avatarUrl"
              class="avatar"
              file
              :cb="cb"
            ></Avatar>
            <div class="main-left-info">
              <div class="name">{{ item.name }}</div>
              <div class="group-num">{{ item.num }}</div>
            </div>
          </div>
          <div @click.stop class="mian-right">
            <el-popconfirm
              @confirm="deleteGroup_fn(item.num)"
              :title="'是否退出群聊 “' + item.name + '” ？'"
            >
              <el-button
                slot="reference"
                type="danger"
                size="mini"
                icon="el-icon-delete"
                circle
              ></el-button>
            </el-popconfirm>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { getAllGroups_fn } from "../../../api/Index/group";
import Avatar from "../../../components/coms/Avatar.vue";
import socket_m from "../../../util/connect";
import groupData_m from "../../../util/groupData";
export default {
  props: ["isGroup"],
  data() {
    return {
      visible: false,
      num: 0,
    };
  },
  methods: {
    async deleteGroup_fn(num) {
      console.log(num);
      socket_m.sendMsg("deleteGroup", { num }, async (o) => {
        if (o.code === 0) {
          let group = await getAllGroups_fn();
          this.$store.commit("updateGroups_fn", group);
        }
      });
    },
    async gotoTempPage_fn(num) {
      if (this.isGroup) {
        socket_m.sendMsg("addTempGroup", { num }, (o) => {
          console.log(o);
          if (o.code === 0) {
            o.item.messages.forEach((item) => (item.isConfirm = true));
            groupData_m.initItem(
              {
                avatarUrl: o.item.avatarUrl,
                name: o.item.name,
                num: o.item.num,
                messages: o.item.messages,
              },
              false
            );
            console.log(groupData_m.groupList);
            this.$store.commit("chat/setGroupNum_fn", num);
            this.$store.commit("updateRouterIndex_fn", "/index/chat");
            this.$router.push("/index/chat");
          }
        });
      }
    },
    cb(base64) {
      socket_m.sendMsg("gAvatar", { base64Img: base64, num: this.num }, (o) => {
        let list = this.$store.state.groups;
        let item = list.find((item1) => item1.num === this.num);
        if (item) {
          item.avatarUrl = o.avatarUrl;
        }
      });
    },
  },
  components: {
    Avatar,
  },
};
</script>
<style lang="less" scoped>
.title {
  font-size: 12px;
  color: #999;
  padding: 20px 12px 0;
}
.main-box {
  margin: 20px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  &:first-child {
    margin-top: 15px;
  }
  .main-left {
    display: flex;
    align-items: center;
    .avatar {
      // width: 35px;
      // height: 35px;
      // border: 1px solid #ccc;
    }
    .main-left-info {
      height: 38px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin-left: 13px;
      .name {
        font-size: 14px;
      }
      .group-num {
        font-size: 12px;
        color: #999;
      }
    }
  }
  .main-right {
    .delete {
    }
  }
}
</style>